<template>
  <el-form :model="form" label-width="80px">
    <el-form-item label="我方执子">
      <el-radio-group v-model="form.side">
        <el-radio :label="0">红方(先手)</el-radio>
        <el-radio :label="1" :disabled="sideDis">黑方(后手)</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="对局模式">
      <el-radio-group v-model="form.edition">
        <el-radio :label="0" :disabled="editionDis">魔改版象棋</el-radio>
        <el-radio :label="1">原中国象棋</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="棋局对手">
      <el-radio-group v-model="form.robot" @change="toEdition">
        <el-radio :label="false">玩家</el-radio>
        <el-radio :label="true">机器</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="棋局步时">
      <el-time-select
        v-model="form.time" placeholder="选择时间" class="full-width"
        :picker-options="{start: '01:00', step: '00:30', end: '10:00'}"
      />
    </el-form-item>
    <el-form-item label="房间密码">
      <el-input type="text" placeholder="请输入密码" v-model="form.pass" maxlength="10" show-word-limit/>
    </el-form-item>
    <el-form-item label="房间备注">
      <el-input type="textarea" v-model="form.desc"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button @click="onCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
/**
 * 这个文件代码实在是写的实在是太垃圾了(我想优化但无从下手)-请大家不要效仿
 * 当然了如果有大神愿意优化请联系我(优化上方的DOM结构)
 */
export default {
  name: 'Setting',
  data() {
    return {
      form: {
        side: 0,
        edition: 0,
        time: '05:00',
        robot: false,
        pass: ''
      },
      editionDis: false,
      sideDis: false
    };
  },
  methods: {
    toEdition() {
      if (this.form.robot) {
        this.form.edition = 1;
        this.form.side = 0;
        this.editionDis = true;
        this.sideDis = true;
        return;
      }
      this.editionDis = false;
      this.sideDis = false;
    },
    onSubmit() {
      if (this.form.time === '') {
        this.$message({
          type: 'warning',
          message: '步时不能为空'
        });
        return;
      }
      this.$emit('onSubmit', this.form);
    },
    onCancel() {
      this.$emit('onCancel');
    }
  }
};
</script>

<style scoped>
.full-width {
  width: 100% !important;
}
</style>
